<!-- 愿望榜单组件 -->
<template>
  <view class="wish-banner" @tap="$emit('click')">
    <view class="wish-content">
      <image src="/static/01.png" mode="aspectFit" class="wish-icon"></image>
      <view class="wish-text-box">
        <text class="wish-title">愿望榜单</text>
        <text class="wish-desc">说出你想吃的美食，我们帮你实现！</text>
      </view>
    </view>
    <view class="wish-action">
      <text class="action-text">立即许愿</text>
      <uni-icons type="arrowright" size="16" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script setup lang="ts">
defineEmits(['click']);
</script>

<style scoped>
.wish-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #00C853 0%, #00E676 100%);
  margin: 0 30rpx 20rpx;
  padding: 30rpx;
  border-radius: 16rpx;
}

.wish-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.wish-icon {
  width: 80rpx;
  height: 80rpx;
}

.wish-text-box {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.wish-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.wish-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.wish-action {
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.action-text {
  font-size: 26rpx;
  color: #fff;
}
</style>